<template>
    <view class="container" v-if="show">
        <view v-if="tipshow && userInfo.ChangeState == 1" class="tip">
            <view>您已提交修改信息申请，资料审核中！</view>
            <view class="rotate" @click="tipshow = false">+</view>
        </view>
        <view class="cell-multi-item">
            <view class="cell-item multi-header" @click="showStep1 = !showStep1">
                <view class="header-title"> <image src="/pages_supplier/static/setting3.png"></image>基本信息 </view>
                <view class="header-icon">
                    <view>{{ showStep1 ? "收起" : "展开" }}</view>
                    <uni-icons :type="showStep1 ? 'arrowup' : 'arrowdown'" customIcons="color-gray"></uni-icons>
                </view>
            </view>
            <view v-show="showStep1">
                <view class="from">
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>店铺名称</view>
                        <view class="value"
                            ><input
                                type="text"
                                placeholder="请输入店铺名称"
                                :disabled="look == 1"
                                v-model="userInfo.Name"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>联系人</view>
                        <view class="value"
                            ><input
                                type="text"
                                placeholder="请输入联系人"
                                :disabled="look == 1"
                                v-model="userInfo.ContactName"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>所在地区</view>
                        <view class="value flex-v-c" @click="areaSelectFn">
                            <view
                                class="flex-fill"
                                :class="regionName == '请选择省/市/区/街道' ? 'color-gray-3' : ''"
                                >{{ regionName }}</view
                            >
                            <uni-icons v-show="look == 0" type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>详细地址</view>
                        <!-- <input type="text" v-model="from.contactAddress" placeholder="请输入联系地址" placeholder-style="color:#999"> -->
                        <view class="dingwei">
                            <textarea
                                class="value-textarea"
                                :disabled="look == 1"
                                v-model="userInfo.ContactAddress"
                                placeholder="请先选择定位"
                                placeholder-style="color:#999;"></textarea>
                            <view class="btn-location" @click="selectAddress">
                                <image v-show="look == 0" src="/static/img/map.png"></image>
                                <text v-show="look == 0">{{ userInfo.lat ? "已定位" : "添加定位" }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>法人身份证号</view>
                        <view class="value"
                            ><input
                                type="text"
                                placeholder="请输入法人身份证号"
                                :disabled="look == 1"
                                v-model="userInfo.LegalPersonCard"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>法人身份证</view>
                        <view class="value imgbox" style="display: flex">
                            <img-item
                                :data="LegalPersonCardImgs[0]"
                                @chooseImage="legalPersonCard1"
                                :look="look"
                                text="身份证正面"
                                :num="1"></img-item>
                            <img-item
                                :data="LegalPersonCardImgs[1]"
                                @chooseImage="legalPersonCard2"
                                :look="look"
                                text="身份证反面"
                                :num="1"></img-item>
                        </view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>营业执照号</view>
                        <view class="value"
                            ><input
                                type="text"
                                v-model="userInfo.LicenesNo"
                                :disabled="look == 1"
                                placeholder="请输入营业执照号"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>营业执照</view>
                        <view class="value imgbox" style="display: flex">
                            <img-item
                                :data="LicenseImg[0]"
                                @chooseImage="license1"
                                :look="look"
                                text="执照正面"
                                :num="1"></img-item>
                            <img-item
                                :data="LicenseImg[1]"
                                @chooseImage="license2"
                                :look="look"
                                text="执照反面"
                                :num="1"></img-item>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="cell-multi-item">
            <view class="cell-item multi-header" @click="showStep2 = !showStep2">
                <view class="header-title"> <image src="/pages_supplier/static/setting1.png"></image>银行信息 </view>
                <view class="header-icon">
                    <view>{{ showStep2 ? "收起" : "展开" }}</view>
                    <uni-icons :type="showStep2 ? 'arrowup' : 'arrowdown'" customIcons="color-gray"></uni-icons>
                </view>
            </view>
            <view v-show="showStep2">
                <view class="from">
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>银行名称</view>
                        <view class="value"
                            ><input
                                type="text"
                                v-model="userInfo.BankName"
                                :disabled="look == 1"
                                placeholder="请输入银行名称"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>银行账号</view>
                        <view class="value"
                            ><input
                                type="text"
                                v-model="userInfo.BankAccount"
                                :disabled="look == 1"
                                placeholder="请输入银行账号"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label"><text v-show="look == 0" class="red">*</text>开户姓名</view>
                        <view class="value"
                            ><input
                                type="text"
                                v-model="userInfo.BankUserName"
                                :disabled="look == 1"
                                placeholder="请输入开户姓名"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label">开户行许可证</view>
                        <view class="value imgbox">
                            <img-item
                                :data="userInfo.OpenLicenseImgs"
                                :look="look"
                                @chooseImage="openLicenseImgs"
                                :num="1"></img-item>
                            <text class="tips">支持gif,jpg,jpeg,bmg,png</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="cell-multi-item">
            <view class="cell-item multi-header" @click="showStep3 = !showStep3">
                <view class="header-title"> <image src="/pages_supplier/static/setting2.png"></image>企业信息 </view>
                <view class="header-icon">
                    <view>{{ showStep3 ? "收起" : "展开" }}</view>
                    <uni-icons :type="showStep3 ? 'arrowup' : 'arrowdown'" customIcons="color-gray"></uni-icons>
                </view>
            </view>
            <view v-show="showStep3">
                <view class="from">
                    <view class="from-list">
                        <view class="label">企业logo</view>
                        <view class="value imgbox">
                            <img-item
                                :data="userInfo.Logo"
                                :look="look"
                                @chooseImage="chooseImagelogo"
                                :num="1"></img-item>
                            <text class="tips">支持gif,jpg,jpeg,bmg,png(建议尺寸200*200)</text>
                        </view>
                    </view>
                    <view class="from-list">
                        <view class="label">企业主营类目</view>
                        <view class="value"
                            ><input
                                type="text"
                                placeholder="请输入企业主营类目"
                                :disabled="look == 1"
                                v-model="userInfo.Types"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label">企业性质</view>
                        <view class="value"
                            ><input
                                type="text"
                                v-model="userInfo.CompanyNature"
                                :disabled="look == 1"
                                placeholder="请输入企业性质"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label">成立时间</view>
                        <view class="value flex-v-c" @click="openStarDate">
                            <view class="flex-fill" :class="userInfo.RegDate == '' ? 'color-gray-3' : ''">{{
                                userInfo.RegDate == "" ? "请输入成立/注册时间" : userInfo.RegDate
                            }}</view>
                            <uni-icons v-show="look == 0" type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <view class="from-list">
                        <view class="label">注册资金</view>
                        <view class="value"
                            ><input
                                type="number"
                                :disabled="look == 1"
                                v-model="userInfo.RegCapital"
                                placeholder="请输入注册资金（元）"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label">企业规模(人)</view>
                        <view class="value"
                            ><input
                                type="number"
                                :disabled="look == 1"
                                v-model="userInfo.CompanySize"
                                placeholder="请输入企业规模(人)"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                    <view class="from-list">
                        <view class="label">企业面积</view>
                        <view class="value"
                            ><input
                                type="number"
                                :disabled="look == 1"
                                v-model="userInfo.FactorySize"
                                placeholder="请输入企业面积(㎡)"
                                placeholder-style="color:#999"
                        /></view>
                    </view>
                </view>
                <view class="desc">
                    <view class="title">供应商简介</view>
                    <rich-text v-if="look == 1" :nodes="formatRichTextFn(userInfo.Description)"> </rich-text>
                    <textarea v-else v-model="description"></textarea>
                </view>
            </view>
        </view>
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="data" @pickArea="pickArea"></area-select>
        </uni-popup>
        <uni-calendar :date="userInfo.RegDate" ref="startDate" :insert="false" @confirm="confirmStarDate">
        </uni-calendar>
    </view>
</template>

<script>
import { GetSupplierInfo, mapbatchSmartParse, SaveSupplierInfo } from "@/pages_supplier/service/api/supplier.js"
import easyCellItem from "@/pages_supplier/components/easy/easy-cell-item.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import imgItem from "@/pages_supplier/components/form/img-item.vue"
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import { formatRichText } from "@/uni-sub-base/utils/elementUtil.js"
export default {
    components: {
        easyCellItem,
        imgItem,
        areaSelect,
    },
    data() {
        return {
            show: false,
            tipshow: true,
            showStep1: false,
            showStep2: false,
            showStep3: false,
            userInfo: {},
            regionName: "请选择省/市/区/街道",
            LegalPersonCardImgs: [],
            LicenseImg: [],
            data: {
                AddressName: "",
                ContactName: "",
                ContactTel: "",
                ContactAddress: "",
                IsDefault: false,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                ZipCode: null,
            },
            look: "1", //商品详情  等于1 查看无法编辑,
            description: "",
        }
    },
    mounted() {
        this.getInfo()
    },
    onShow() {},
    methods: {
        getInfo() {
            GetSupplierInfo().then((res) => {
                if (res.State == 1) {
                    this.userInfo = res.Data
                    this.regionName =
                        this.userInfo.ProvinceName +
                        this.userInfo.CityName +
                        this.userInfo.RegionName +
                        this.userInfo.StreetName
                    if (this.userInfo.LegalPersonCardImgs) {
                        this.LegalPersonCardImgs = this.userInfo.LegalPersonCardImgs.split(",")
                    }
                    if (this.userInfo.LicenseImg) {
                        this.LicenseImg = this.userInfo.LicenseImg.split(",")
                    }
                    console.log(this.LicenseImg)
                    this.show = true
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        legalPersonCard1(index, value) {
            this.LegalPersonCardImgs[0] = value
        },
        legalPersonCard2(index, value) {
            this.LegalPersonCardImgs[1] = value
        },
        license1(index, value) {
            this.LicenseImg[0] = value
        },
        license2(index, value) {
            this.LicenseImg[1] = value
        },
        openLicenseImgs(index, value) {
            this.userInfo.OpenLicenseImgs = value
        },
        chooseImagelogo(index, value) {
            this.userInfo.Logo = value
        },
        formatRichTextFn(text) {
            return formatRichText(text)
        },
        openStarDate() {
            if (this.look == 1) {
                return
            }
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择成立日期
            this.userInfo.RegDate = e.fulldate
        },
        selectAddress() {
            if (this.look == 1) {
                return
            }
            uni.navigateTo({
                url: "/pages/map/map-poi",
                events: {
                    getSelectData: (data) => {
                        this.getmapP(data)
                        console.log(data)
                        this.userInfo.ContactAddress = data.address.replace(/\\/g, "")
                        this.userInfo.Lng = data.location.longitude
                        this.userInfo.Lat = data.location.latitude
                    },
                },
            })
        },
        getmapP(res) {
            let item = {
                ContactAddress: res.address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreeName: "",
                ContactName: "aaa",
                ContactTel: "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        //智能识别
        batchSmartParse(param) {
            mapbatchSmartParse(param).then((res) => {
                if (res.Data && res.Data.list && res.Data.list.length > 0) {
                    let result = res.Data.list[0]
                    this.data.ProvinceId = result.ProvinceId
                    this.data.ProvinceName = result.ProvinceName
                    this.data.CityId = result.CityId
                    this.data.CityName = result.CityName
                    this.data.AreaId = result.AreaId
                    this.data.AreaName = result.AreaName
                    this.data.StreetId = 0
                    this.data.StreetName = ""
                    this.getRegionName()
                }
            })
        },
        //选择地区
        areaSelectFn() {
            if (this.look == 1) {
                return
            }
            this.$refs.areaSelect.open()
        },
        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.data = Object.assign(this.data, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.data.ProvinceName || ""}-${this.data.CityName || ""}${
                this.data.AreaName ? line + this.data.AreaName : ""
            }${this.data.StreetName ? line + this.data.StreetName : ""}`
        },
        fromVerify() {
            console.log(this.LegalPersonCardImgs[0])
            if (this.userInfo.Name == "") {
                this.easyToast("请输入店铺名称")
                return false
            }
            if (this.userInfo.ContactName == "") {
                this.easyToast("请输入联系人")
                return false
            }
            if (this.regionName == "请选择省/市/区/街道") {
                this.easyToast("请选择省/市/区/街道")
                return false
            }
            if (this.userInfo.ContactAddress == "") {
                this.easyToast("请输入联系地址")
                return false
            }
            if (!this.userInfo.Lat) {
                this.easyToast("请添加定位地址")
                return false
            }
            if (this.userInfo.LegalPersonCard == "" || this.userInfo.LegalPersonCard == null) {
                this.easyToast("请输入法人身份证号")
                return false
            }
            if (this.LegalPersonCardImgs[0] == "" || this.LegalPersonCardImgs[0] == undefined) {
                this.easyToast("请上传身份证正面照")
                return false
            }
            if (this.LegalPersonCardImgs[1] == "" || this.LegalPersonCardImgs[1] == undefined) {
                this.easyToast("请上传身份证反面照")
                return false
            }
            if (this.userInfo.LicenesNo == "" || this.userInfo.LicenesNo == null) {
                this.easyToast("请输入营业执照号")
                return false
            }
            if (this.LicenseImg[0] == "" || this.LicenseImg[0] == undefined) {
                this.easyToast("请上传营业执照正面照")
                return false
            }
            if (this.LicenseImg[1] == "" || this.LicenseImg[1] == undefined) {
                this.easyToast("请上传营业执照反面照")
                return false
            }
            if (this.userInfo.BankName == "" || this.userInfo.BankName == null) {
                this.easyToast("请输入银行名称")
                return false
            }
            if (this.userInfo.BankAccount == "" || this.userInfo.BankAccount == null) {
                this.easyToast("请输入银行账号")
                return false
            }
            if (this.userInfo.BankUserName == "" || this.userInfo.BankUserName == null) {
                this.easyToast("请输入开户姓名")
                return false
            }
            return true
        },
        submit() {
            if (this.fromVerify()) {
                this.userInfo.LegalPersonCardImgs = this.LegalPersonCardImgs.join(",")
                this.userInfo.LicenseImg = this.LicenseImg.join(",")
                this.userInfo.Description = this.description
                let param = this.userInfo
                SaveSupplierInfo(param).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("修改成功")
                        this.easyGoBack()
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            }
        },
        onNavigationBarButtonTap(e) {
            if (this.userInfo.ChangeState == 1) {
                this.easyToast("资料审核中,不可编辑")
                return false
            }
            var index = e.index
            // 按钮文字的改变所需
            // #ifdef APP-PLUS
            var currentWebview = this.$mp.page.$getAppWebview()
            var tn = currentWebview.getStyle().titleNView
            console.log(tn)
            var text = tn.buttons[0].text
            console.log(text)
            if (text == "编辑") {
                this.look = 0
                tn.buttons[0].text = "保存"
                currentWebview.setStyle({
                    titleNView: tn,
                })
            } else if (text == "保存") {
                this.submit()
            }
            // #endif
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding-bottom: 48rpx;
}

.tip {
    height: 88rpx;
    display: flex;
    padding: 0 24rpx;
    background: #fdfbec;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #fe6430;

    .rotate {
        transform: rotate(45deg);
        font-size: 40rpx;
    }
}

.cell-multi-item {
    margin: $app-page-padding $app-page-padding 0 $app-page-padding;

    .cell-item {
        height: 100rpx;
        background: $color-white;
        padding: 0 $app-page-padding;
        border-top: solid 1rpx #f0f0f0;
        display: flex;
        flex-direction: row;
        align-items: center;

        .label {
            font-size: $font-size-30;
            color: $color-gray-1;
            width: 180rpx;
            display: block;
        }

        .value {
            flex: 1;
            display: flex;
            justify-content: space-between;
            font-size: $font-size-30;
            color: #323232;
        }

        .icon-right {
            margin-right: -8rpx;
        }
    }
}

.multi-header {
    height: 112rpx;
    border: none;

    .header-title {
        flex: 1;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: $font-size-32;
        color: #252528;

        image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
        }
    }

    .header-icon {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        & > view {
            font-size: 28rpx;
            color: $color-gray-3;
            margin-right: 12rpx;
        }
    }
}

.main {
    // margin-top: 24rpx;
    background: #ffffff;
}

.color-gray-3 {
    color: $color-gray-3;
}

.desc {
    padding: 0 24rpx 24rpx;
    background: #ffffff;
    font-size: 30rpx;
    color: $color-gray-1;

    .title {
        height: 112rpx;
        display: flex;
        align-items: center;
    }

    textarea {
        width: calc(100% - 48rpx);
        background: #f5f5f5;
        padding: 22rpx 24rpx;
    }
}

.from {
    margin-bottom: 28rpx;

    .from-list {
        padding: 0 24rpx;
        min-height: 112rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #ffffff;
        border-bottom: 1rpx solid $uni-border-bottom-color;

        .label {
            width: 200rpx;
            font-size: 30rpx;
            color: $color-gray-1;
        }

        .value {
            flex: 1;
            font-size: 30rpx;
            color: #323232;
        }

        .imgbox {
            margin-top: 32rpx;

            .tips {
                font-size: 20rpx;
                color: #ccc;
                display: block;
                margin: -30rpx 0 32rpx 0;
            }
        }
    }

    .imgcode {
        width: 178rpx;
        height: 66rpx;
    }
}

.dingwei {
    background: #f6f7f7;
    border-radius: 8rpx;
    padding: 24rpx 0;
    margin: 24rpx 0;
    width: calc(100% - 200rpx);
    flex: 1;
}

.btn-location {
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 100rpx;
    justify-content: flex-end;
    color: #333333;

    image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
    }
}

.value-textarea {
    width: 100%;
    height: 100rpx;
    margin-bottom: 10rpx;
}

.flex-fill {
    font-size: 32rpx;
}
</style>
